<template>
	<view class="top flex">
		<view class="radar" :style="{ backgroundImage: 'url(' + imageUrl + ')' }">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imageUrl: {
				type: String,
				default: ''
			},
		},
	  data() {
	    return {
	      // imageUrl: '' // 初始背景图片路径
	    };
	  },
	  methods: {
	    changeBackground(newImageUrl) {
	      this.imageUrl = newImageUrl; // 更新背景图片路径
	    }
	  }
	};
</script>

<style lang="scss" scoped>
	.top {
		width: 100%;
		padding-top: 10rpx;
		.device-status {
			width: 522rpx;
			height: 522rpx;
			border-radius: 50%;
			background-color: rgba(255, 229, 193, 0.4);
		}
		.radar {
			width: 522rpx;
			height: 522rpx;
			border-radius: 50%;
			font-size: 28rpx;
			// background: url('/static/image/wf-bg.png');			
			background-size: 100% 100%;
			position: relative;
			margin: 0 auto;
			.wave-box {
				width: 522rpx;
				height: 522rpx;
			}
		}
		.radar::before {
			content: '';
			position: absolute;
			width: calc(522rpx / 2);
			height: calc(522rpx / 2);
			background: linear-gradient(45deg,
					rgba(0, 0, 0, 0) 50%,
					rgba(220, 204, 163, 1) 100%);
			border-radius: 100% 0 0 0;
			// 增加转动效果
			animation: scanning 5s linear infinite;
			transform-origin: 100% 100%;
		}

		// 增加转动效果
		@keyframes scanning {
			to {
				transform: rotate(360deg);
			}
		}
	}
</style>